<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <title>RainyDay.js : rendering raindrops with javascript</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="rendering raindrops with javascript">
    <link href="favicon.ico" rel="shortcut icon">
    <link href="./css/bootstrap.css" rel="stylesheet">
    <link href="./css/site.css" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/3.7/html5shiv.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>

  <body>
    <div>
      <div class="jumbotron" id="rainyDayHeader">
        <h1>RainyDay.js</h1>
        <br>
        <p>Rendering raindrops with JavaScript</p>
        <br>
        <a class="btn btn-default btn-lg" href="https://github.com/mubaidr/rainyday.js#rainydayjs">Learn more</a>
      </div>
    </div>
    <div class="container marketing">
      <hr class="featurette-divider">
      <div class="row featurette">
        <div class="col-md-7">
          <h2 class="featurette-heading">About</h2>
          <p class="lead">The idea behind rainyday.js is to create a JavaScript library that makes use of the HTML5 canvas to render an animation
            of raindrops falling on a glass surface. Simple enough, right?</p>
          <p class="lead">Have a look at the demos to see it in action.</p>
        </div>
        <div class="col-md-5">
          <img class="featurette-image img-responsive" src="img/dm1.jpg" alt="Demo #1">
        </div>
      </div>
      <hr class="featurette-divider">
      <div>
        <h2 id="demos">Demos</h2>
        <p class="lead">You can get source code of all the demos
          <a href="https://github.com/mubaidr/rainyday.js/tree/master/docs">here</a>
        </p>
        <div class="row">
          <div class="col-md-6">
            <div class="list-group">
              <a class="list-group-item" href="./demo1.html">
                <h4 class="list-group-item-heading">Demo 1</h4>
                <p class="list-group-item-text">Example with custom rain engine parameters update example.</p>
              </a>
              <a class="list-group-item" href="./demo2.html">
                <h4 class="list-group-item-heading">Demo 2</h4>
                <p class="list-group-item-text">Example with custom rain engine parameters.</p>
              </a>
              <a class="list-group-item" href="./demo3.html">
                <h4 class="list-group-item-heading">Demo 3</h4>
                <p class="list-group-item-text">Another example with custom rain engine parameters.</p>
              </a>
            </div>
          </div>
          <div class="col-md-6">
            <div class="list-group">
              <a class="list-group-item" href="./demo4.html">
                <h4 class="list-group-item-heading">Demo 4</h4>
                <p class="list-group-item-text">Setting gravity and smudge for screen.</p>
              </a>
              <a class="list-group-item" href="./demo5.html">
                <h4 class="list-group-item-heading">Demo 5</h4>
                <p class="list-group-item-text">Using portion of image (croping option)</p>
              </a>
              <a class="list-group-item" href="./demo6.html">
                <h4 class="list-group-item-heading">Demo 6</h4>
                <p class="list-group-item-text">Using background image of a container</p>
              </a>
            </div>
          </div>
        </div>
      </div>
      <hr class="featurette-divider">
      <h2 id="options">Options</h2>
      RainyDay.js provides following options to configure the rain pattern and display behaviour.
      <br>
      <code>var rainyDay = new RainyDay(options)</code>
      <div>
        <table class="table table-striped table-hover ">
          <thead>
            <tr>
              <th>Option</th>
              <th>Defaults</th>
              <th>Description</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="1">image</td>
              <td colspan="1">None</td>
              <td colspan="3">[Required] Source image element, ID or element with background image or ID of element with background image</td>
            </tr>
            <tr>
              <td colspan="1">parentElement</td>
              <td colspan="1">Optimal</td>
              <td colspan="3">Specify Id of the parent element which should contian generated effect.</td>
            </tr>
            <tr>
              <td colspan="1">sound</td>
              <td colspan="1">none</td>
              <td colspan="3">Path of the sound file to play</td>
            </tr>
            <tr>
              <td colspan="1">blur</td>
              <td colspan="1">10</td>
              <td colspan="3">Blur strength applied to the image</td>
            </tr>
            <tr>
              <td colspan="1">crop</td>
              <td colspan="1">none</td>
              <td colspan="3">Crop object if you want to use a cropped portion of the image.</td>
            </tr>
            <tr>
              <td colspan="1">enableCollisions</td>
              <td colspan="1">true</td>
              <td colspan="3">Enable collisions between rain drops</td>
            </tr>
            <tr>
              <td colspan="1">enableSizeChange</td>
              <td colspan="1">true</td>
              <td colspan="3">Hanlde canvas update when screen size changes</td>
            </tr>
            <tr>
              <td colspan="1">fps</td>
              <td colspan="1">24</td>
              <td colspan="3">Rendering fps of canvas updates</td>
            </tr>
            <tr>
              <td colspan="1">gravityAngle</td>
              <td colspan="1">Math.PI / 2</td>
              <td colspan="3">Angle of gravity</td>
            </tr>
            <tr>
              <td colspan="1">gravityAngleVariance</td>
              <td colspan="1">0</td>
              <td colspan="3">Adds variance to gravity to simulate wind effects</td>
            </tr>
            <tr>
              <td colspan="1">gravityThreshold</td>
              <td colspan="1">3</td>
              <td colspan="3">Strength of the gravity</td>
            </tr>
          </tbody>
        </table>
      </div>
      <hr class="featurette-divider">
      <h2 id="methods">Methods</h2>
      RainyDay.js provides following methods to update the rain behaviour at runtime.
      <br>
      <code>var rainyDay = new RainyDay({image: '#myHeader'})</code>
      <div>
        <table class="table table-striped">
          <thead>
            <tr>
              <th colspan="1">Method</th>
              <th colspan="3">Description</th>
              <th colspan="1">Example</th>
            </tr>
          </thead>
          <tbody>
            <tr>
              <td colspan="1">rain</td>
              <td colspan="3">Applies rain presets to the initliazed RainyDay Object.</td>
              <td colspan="1">
                <code>
                  rainyDay.rain([ [3 //min drop size, 3//max drop size, 0.88//delay], [5, 5, 0.9], [6, 2, 1]]) //collection of engine presets
                </code>
              </td>
            </tr>
            <tr>
              <td colspan="1">pause</td>
              <td colspan="3">Pause animation.</td>
              <td colspan="1">
                <code>
                  rainyDay.pause()
                </code>
              </td>
            </tr>
            <tr>
              <td colspan="1">resume</td>
              <td colspan="3">Resume animation.</td>
              <td colspan="1">
                <code>
                  rainyDay.resume()
                </code>
              </td>
            </tr>
            <tr>
              <td colspan="1">destroy</td>
              <td colspan="3">Destroys the rain engine</td>
              <td colspan="1">
                <code>
                  rainyDay.destroy()
                </code>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
      <hr class="featurette-divider">
      <div class="row featurette">
        <div class="col-md-5">
          <img class="featurette-image img-responsive" src="img/dm4.jpg" alt="Demo #4">
        </div>
        <div class="col-md-7">
          <h2 class="featurette-heading">Wanna help?
            <span class="text-muted">Yay!</span>
          </h2>
          <p class="lead">We're looking for fresh ideas, patches that might improve code quality and performance. Found an issue with the
            script or have a feature request?
            <a href="https://github.com/mubaidr/rainyday.js/issues">Submit a ticket!</a>
          </p>
          <p> Forked from:
            <a href="https://github.com/maroslaw/rainyday.js" target="_blank">RainyDay.js</a>
            All credits to the orignal author:
            <a href="https://github.com/maroslaw" target="_blank">@maroslaw</a>
          </p>
        </div>
      </div>
      <hr class="featurette-divider">
      <footer>
        <p class="pull-right">
          <a href="#">Back to top</a>
        </p>
      </footer>
    </div>
    <script src="./js/rainyday.min.js"></script>
    <script src="./js/site.js"></script>
  </body>

</html>
